<template>
  <div class="salary-container">
    <Search :search-name="searchName" @sendInfo="sendInfoFn" />
    <Table :add-info="'新增仓库'">
      <template #table>
        <el-table ref="singleTable" :header-cell-style="headerCellStyle" border stripe :data="wareHouseInfo.records" highlight-current-row center>
          <el-table-column align="center" label="序号" width="70" type="index" height="40" />
          <el-table-column align="center" property="code" width="150" label="仓库编码" />
          <el-table-column align="center" property="name" width="150" label="仓库名称" />
          <el-table-column align="center" width="150" label="仓库类型">
            <template #default="{ row }">
              {{ typeInfo[row.type] }}
            </template>
          </el-table-column>
          <el-table-column align="center" property="location" width="200" label="省/市/区" />
          <el-table-column align="center" property="address" width="150" label="详细地址" />
          <el-table-column align="center" property="status" width="150" label="仓库状态">
            <template #default="{ row }">
              {{ statusInfo[+row.status] }}
            </template>
          </el-table-column>
          <el-table-column align="center" property="surface" width="150" label="仓库面积" />
          <el-table-column align="center" property="includedNum" width="150" label="库区数量" />
          <el-table-column align="center" property="createName" width="150" label="负责人" />
          <el-table-column align="center" property="phone" width="150" label="联系电话" />
          <el-table-column align="center" property="updateTime" width="200" label="更新时间" />
          <el-table-column align="center" label="操作" width="230" fixed="right">
            <template slot-scope="{ row }">
              <el-button type="info" size="mini" @click.native="aditInfo(row.id)">编辑</el-button>
              <el-button size="mini" type="primary" @click.native="preventUse(row)">停用</el-button>
              <el-button type="danger" size="mini" @click.native="deleteInfo">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <Pagination :search-task-list="wareHouseInfo" @currentSizeChange="(value) => (listInfoParams.size = value)" @currentPageChange="(value) => (listInfoParams.current = value)" />
      </template>
    </Table>
  </div>
</template>
<script>
import Search from '../components/Search.vue'
import Table from '../components/Table.vue'
import { wareHouseAPI } from '@/api'
// // 将编辑时的id持久化
import { setEditId } from '@/utils/auth'
export default {
  name: 'Warehouse',
  components: {
    Search,
    Table
  },
  data() {
    return {
      // 搜索框名称
      searchName: ['仓库编号', ' 仓库名称', '仓库状态'],
      // 参数
      listInfoParams: {
        like_code: '',
        like_name: '',
        status: null,
        current: 1,
        size: 10,
        descs: 'createTime'
      },
      // 表格渲染数据
      wareHouseInfo: {
        records: []
      },
      // 类型
      typeInfo: {
        ZZ: '中转仓',
        JG: '加工仓',
        CB: '储备仓',
        LC: '冷藏仓'
      },
      // 状态
      statusInfo: {
        0: '停用',
        1: '启用'
      },
      // 表头样式
      headerCellStyle: {
        background: 'rgb(249, 246, 238)',
        color: '#887e7e',
        fontSize: '12px',
        fontFamily: 'PingFangSC,PingFangSC-Medium',
        fontWeight: '500'
      }
    }
  },
  watch: {
    listInfoParams: {
      handler() {
        this.fetchWareHouseList()
      },
      deep: true
    }
  },
  created() {
    this.fetchWareHouseList()
  },
  methods: {
    // 列表渲染
    async fetchWareHouseList() {
      const res = await wareHouseAPI(this.listInfoParams)
      // console.log(res.data.records[1])
      this.wareHouseInfo = res.data
    },
    sendInfoFn(value) {
      this.listInfoParams = {
        like_code: value.code,
        like_name: value.name,
        status: value.status,
        current: 1,
        size: 10,
        descs: 'createTime'
      }
    },
    // 编辑
    aditInfo(editid) {
      setEditId(editid)
      this.$router.push({
        name: 'editdetails',
        params: {
          editid
        }
      })
    },
    // 停用
    preventUse(value) {
      console.log(value)
    },
    // 删除提示
    deleteInfo() {
      this.$notify({
        title: '提示',
        message: '演示系统，不支持此操作',
        type: 'warning',
        offset: 80,
        duration: 2000
      })
    }
  }
}
</script>

<style lang="scss">
.el-table__header {
  background-color: #f9f6ee;
}
.el-table th,
.el-table td {
  padding: 8px;
}
</style>
